<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">

<head>
    <title>编辑图书 - 图书馆管理系统</title>
</head>

<body>
    <section>
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>编辑图书</h2>
            <div>
                <a th:href="@{/book/detail/{id}(id=${book.id})}" class="btn btn-info">
                    <i class="fas fa-eye"></i> 查看详情
                </a>
                <a href="/book/list" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">图书信息</h5>
            </div>
            <div class="card-body">
                <form id="editBookForm">
                    <input type="hidden" id="id" name="id" th:value="${book.id}">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">图书名称</label>
                                <input type="text" class="form-control" id="name" name="name" th:value="${book.name}"
                                    required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="isbn">ISBN</label>
                                <input type="text" class="form-control" id="isbn" name="isbn" th:value="${book.isbn}"
                                    required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="author">作者</label>
                                <input type="text" class="form-control" id="author" name="author"
                                    th:value="${book.author}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="publisher">出版社</label>
                                <input type="text" class="form-control" id="publisher" name="publisher"
                                    th:value="${book.publisher}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="publishDate">出版日期</label>
                                <input type="date" class="form-control" id="publishDate" name="publishDate"
                                    th:value="${#temporals.format(book.publishDate, 'yyyy-MM-dd')}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="categoryId">分类</label>
                                <select class="form-control" id="categoryId" name="categoryId" required>
                                    <option value="">请选择分类</option>
                                    <option th:each="category : ${categories}" th:value="${category.id}"
                                        th:text="${category.name}" th:selected="${category.id == book.categoryId}">分类名称
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="price">价格</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">¥</span>
                                    </div>
                                    <input type="number" class="form-control" id="price" name="price" step="0.01"
                                        min="0" th:value="${book.price}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="stock">库存数量</label>
                                <input type="number" class="form-control" id="stock" name="stock" min="0"
                                    th:value="${book.stock}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="location">存放位置</label>
                                <input type="text" class="form-control" id="location" name="location"
                                    th:value="${book.location}">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="coverImage">封面图片URL</label>
                        <input type="text" class="form-control" id="coverImage" name="coverImage"
                            th:value="${book.coverImage}" placeholder="请输入图片URL地址">
                        <div class="mt-2" th:if="${book.coverImage}">
                            <img th:src="${book.coverImage}" alt="封面预览" style="max-height: 100px;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="description">图书描述</label>
                        <textarea class="form-control" id="description" name="description" rows="5"
                            th:text="${book.description}"></textarea>
                    </div>

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="status" name="status"
                                th:checked="${book.status == 1}">
                            <label class="custom-control-label" for="status">上架状态</label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> 保存
                    </button>
                    <a th:href="@{/book/detail/{id}(id=${book.id})}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> 取消
                    </a>
                </form>
            </div>
        </div>

        <script th:inline="javascript">
            $(document).ready(function () {
                // 表单提交事件
                $('#editBookForm').submit(function (e) {
                    e.preventDefault();

                    // 获取表单数据
                    const formData = {
                        id: $('#id').val(),
                        name: $('#name').val(),
                        isbn: $('#isbn').val(),
                        author: $('#author').val(),
                        publisher: $('#publisher').val(),
                        publishDate: $('#publishDate').val() ? $('#publishDate').val() + 'T00:00:00' : null,
                        categoryId: $('#categoryId').val(),
                        price: $('#price').val(),
                        description: $('#description').val(),
                        coverImage: $('#coverImage').val(),
                        stock: $('#stock').val(),
                        location: $('#location').val(),
                        status: $('#status').is(':checked') ? 1 : 0
                    };

                    // 发送AJAX请求
                    $.ajax({
                        url: '/book/api/update',
                        type: 'PUT',
                        contentType: 'application/json',
                        data: JSON.stringify(formData),
                        success: function (res) {
                            if (res.code === 200) {
                                alert('图书更新成功！');
                                window.location.href = '/book/detail/' + $('#id').val();
                            } else {
                                alert('图书更新失败：' + res.message);
                            }
                        },
                        error: function () {
                            alert('服务器错误，请稍后再试！');
                        }
                    });
                });
            });
        </script>
    </section>
</body>

</html>